<template>
    <!-- pages/cardexchange/index.wxml -->
    <view class="page">
        <view class="box">
            <van-field :value="cardcode" clearable label="卡号" placeholder="请输入卡号" input-align="right" label-class="label-class" @change="onCard" />
        </view>
        <view class="box">
            <van-field :value="password" clearable label="密码" placeholder="请填写图层后的密码" input-align="right" label-class="label-class" @change="onPassword" />
        </view>
        <view class="btn" @tap="onSub">兑换</view>

        <van-overlay :show="show" @click="onClickHide">
            <view class="wrapper">
                <view class="wrapperbox">
                    <image class="card-bg1" :src="imgUrl + 'card-bg1.png'"></image>
                    <view class="title">兑换成功！</view>
                    <view class="coinbox">
                        <view class="mt-20" v-for="(item, index) in cardlist" :key="index">
                            <image class="card-bg2" :src="imgUrl + 'card-bg2.png'"></image>

                            <view class="flexbox-sb pd">
                                <view class="leftbox">
                                    <view class="l-text1">现金抵用券</view>
                                    <view class="l-text2 mt-20">有效期内可用</view>
                                    <view class="l-text2">全平台可用</view>
                                    <view class="l-text2">有效期:永久有效</view>
                                </view>
                                <view class="rightbox">
                                    <view class="r-text1">现金券</view>
                                    <view class="centers rt">
                                        <text class="r-text2">￥</text>
                                        <text class="r-text3">{{ item.deduction }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="hb-btn" @tap.stop.prevent="toSelectshoppingmeal">
                        <image class="btnimg" :src="imgUrl + 'hb-btn.png'"></image>
                        <text>去看看</text>
                    </view>
                    <view class="icon" @tap.stop.prevent="onClickHide">
                        <van-icon name="close" size="60rpx" color="white" />
                    </view>
                </view>
            </view>
        </van-overlay>
    </view>
</template>

<script>
// pages/cardexchange/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';
export default {
    data() {
        return {
            cardcode: '',
            password: '',
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            show: false,
            cardlist: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 获取卡号
        onCard(e) {
            this.setData({
                cardcode: e.detail
            });
        },

        // 获取密码
        onPassword(e) {
            this.setData({
                password: e.detail
            });
        },

        // 提交
        onSub() {
            const { cardcode, password } = this;

            _request
                .postObj('/storeCouponCode/couponConversionByCodeAndPasswrod', {
                    userId: uni.getStorageSync('userid'),
                    couponcode: cardcode,
                    password: '1234ABCD'
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        this.setData({
                            show: true,
                            cardlist: res.data.data,
                            cardcode: '',
                            password: ''
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 点击关闭红包页
        onClickHide() {
            this.setData({
                show: false
            });
        },

        // 前往优惠券
        toSelectshoppingmeal() {
            uni.navigateTo({
                url: '/storepages/selectshoppingmeal/index'
            });
        }
    }
};
</script>
<style>
/* pages/cardexchange/index.wxss */
.page {
    padding: 20rpx;
}

.box {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    margin-top: 20rpx;
}

.label-class {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
}

.btn {
    width: 670rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45px;
    line-height: 90rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    text-align: center;
    margin: 326rpx 20rpx 0 20rpx;
}

/* 卡券弹窗 */
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

.wrapperbox {
    width: 750rpx;
    position: absolute;
    top: 230rpx;
    height: 990rpx;
    display: flex;
    justify-content: center;
}

.hb-btn {
    z-index: 3;
    width: 283rpx;
    height: 88rpx;
    position: absolute;
    top: 647rpx;
}

.hb-btn text {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 68rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #9b4f00;
    font-size: 34rpx;
}

.btnimg {
    width: 283rpx;
    height: 88rpx;
}

.card-bg1 {
    width: 750rpx;
    position: absolute;
    height: 990rpx;
}

.title {
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 800;
    color: #c1631e;
    position: absolute;
    top: 56rpx;
}

.coinbox {
    z-index: 3;
    position: absolute;
    width: 407rpx;
    height: 144rpx;
    top: 100rpx;
}

.coinbox > view {
    width: 408rpx;
}

.card-bg2 {
    width: 407rpx;
    height: 144rpx;
    position: absolute;
}

.pd {
    padding: 10rpx 20rpx;
}

.leftbox {
    z-index: 4;
}

.rightbox {
    z-index: 4;
    margin-right: 10rpx;
}

.l-text1 {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    line-height: 28rpx;
    text-align: center;
}

.l-text2 {
    font-size: 20rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 24rpx;
}

.rt {
    height: 46rpx;
    margin: 10rpx 10rpx 0rpx 0rpx;
}

.r-text1 {
    width: 87rpx;
    height: 29rpx;
    background: linear-gradient(-58deg, #ff8722 0%, #ff5f51 100%);
    border-radius: 0px 10rpx 0px 10rpx;
    font-size: 20rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #fff8f0;
    line-height: 29rpx;
    text-align: center;
    right: -20rpx;
    position: relative;
}

.r-text2 {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 800;
    color: #ff8722;
    line-height: 26rpx;
}

.r-text3 {
    font-size: 60rpx;
    font-family: PingFang SC;
    font-weight: 800;
    color: #ff8722;
    line-height: 26rpx;
}

.icon {
    position: absolute;
    bottom: 124rpx;
}
</style>
